/*
 * Copyright (C) 2025 Holaf
 * Holaf Utilities - Shared Stylesheet
 *
 * MODIFIED: Complete overhaul for unified theming using CSS variables based on HOLAF_THEMES.
 *           Removed old Model Manager specific theme classes.
 *           Applied theme variables to shared panel elements and Model Manager specifics.
 * MODIFIED: Styled main "Holaf's Utilities" button and its dropdown to match Graphite Orange theme.
 * MODIFIED: Added styles for Nodes Manager checkboxes and action buttons.
 * MODIFICATION: Added styles for custom modal dialogs.
 * MODIFICATION: Added styles for the new Settings Panel.
 * MODIFICATION: Added zoom factor variable to Nodes Manager CSS for UI scaling.
 * CORRECTION: Isolated zoom to content container and adjusted list item padding for zoom.
 * CORRECTION: Scaled margin-bottom on node list items to improve vertical compactness on zoom out.
 * MODIFICATION: Added styles for the Nodes Manager filter input.
 */

/* --- THEME DEFINITIONS (Variables CSS) --- */

/* Graphite Orange Theme (Dark) */
.holaf-theme-graphite-orange {
    --holaf-accent-color: #D8700D;
    --holaf-background-primary: #1E1E1E;
    --holaf-background-secondary: #2B2B2B;
    --holaf-text-primary: #E0E0E0;
    --holaf-text-secondary: #A0A0A0;
    --holaf-border-color: #3F3F3F;
    --holaf-button-background: #D8700D;
    --holaf-button-text: #FFFFFF;
    --holaf-input-background: #252525;
    --holaf-tag-background: #4F4F4F;
    --holaf-tag-text: #DADADA;
    --holaf-family-tag-background: #5A3E1E;
    --holaf-family-tag-text: #E8D8C8;
    --holaf-header-button-bg: rgba(255, 255, 255, 0.08);
    --holaf-header-button-hover-bg: rgba(255, 255, 255, 0.15);
    --holaf-header-button-text: #B0B0B0;
    --holaf-header-button-hover-text: #E0E0E0;
    --holaf-scrollbar-thumb: #555555;
    --holaf-scrollbar-track: var(--holaf-background-secondary);
}

/* Midnight Purple Theme (Dark) */
.holaf-theme-midnight-purple {
    --holaf-accent-color: #8A2BE2;
    --holaf-background-primary: #1C1C2E;
    --holaf-background-secondary: #2A2A40;
    --holaf-text-primary: #E0D8F0;
    --holaf-text-secondary: #9890B0;
    --holaf-border-color: #383850;
    --holaf-button-background: #8A2BE2;
    --holaf-button-text: #FFFFFF;
    --holaf-input-background: #242438;
    --holaf-tag-background: #4A3A5E;
    --holaf-tag-text: #E0D8F0;
    --holaf-family-tag-background: #4A2A60;
    --holaf-family-tag-text: #E8D8F8;
    --holaf-header-button-bg: rgba(224, 216, 240, 0.08);
    --holaf-header-button-hover-bg: rgba(224, 216, 240, 0.15);
    --holaf-header-button-text: #B0A8C0;
    --holaf-header-button-hover-text: #E0D8F0;
    --holaf-scrollbar-thumb: #4A3A5E;
    --holaf-scrollbar-track: var(--holaf-background-secondary);
}

/* Forest Green Theme (Dark) */
.holaf-theme-forest-green {
    --holaf-accent-color: #228B22;
    --holaf-background-primary: #1A241A;
    --holaf-background-secondary: #283A28;
    --holaf-text-primary: #D0E0D0;
    --holaf-text-secondary: #809080;
    --holaf-border-color: #304830;
    --holaf-button-background: #228B22;
    --holaf-button-text: #FFFFFF;
    --holaf-input-background: #223022;
    --holaf-tag-background: #3A5E3A;
    --holaf-tag-text: #D0E0D0;
    --holaf-family-tag-background: #2A4A2A;
    --holaf-family-tag-text: #D8E8D8;
    --holaf-header-button-bg: rgba(208, 224, 208, 0.08);
    --holaf-header-button-hover-bg: rgba(208, 224, 208, 0.15);
    --holaf-header-button-text: #A0B0A0;
    --holaf-header-button-hover-text: #D0E0D0;
    --holaf-scrollbar-thumb: #3A5E3A;
    --holaf-scrollbar-track: var(--holaf-background-secondary);
}

/* Steel Blue Theme (Dark) */
.holaf-theme-steel-blue {
    --holaf-accent-color: #4682B4;
    --holaf-background-primary: #1C2024;
    --holaf-background-secondary: #2A3038;
    --holaf-text-primary: #D0D8E0;
    --holaf-text-secondary: #808890;
    --holaf-border-color: #36404A;
    --holaf-button-background: #4682B4;
    --holaf-button-text: #FFFFFF;
    --holaf-input-background: #24282D;
    --holaf-tag-background: #3A4E5E;
    --holaf-tag-text: #D0D8E0;
    --holaf-family-tag-background: #304050;
    --holaf-family-tag-text: #D8E0E8;
    --holaf-header-button-bg: rgba(208, 216, 224, 0.08);
    --holaf-header-button-hover-bg: rgba(208, 216, 224, 0.15);
    --holaf-header-button-text: #A0A8B0;
    --holaf-header-button-hover-text: #D0D8E0;
    --holaf-scrollbar-thumb: #3A4E5E;
    --holaf-scrollbar-track: var(--holaf-background-secondary);
}

/* Ashy Light Theme (Light) */
.holaf-theme-ashy-light {
    --holaf-accent-color: #607D8B;
    --holaf-background-primary: #FAFAFA;
    --holaf-background-secondary: #F0F0F0;
    --holaf-text-primary: #263238;
    --holaf-text-secondary: #546E7A;
    --holaf-border-color: #DCDCDC;
    --holaf-button-background: #607D8B;
    --holaf-button-text: #FFFFFF;
    --holaf-input-background: #FFFFFF;
    --holaf-tag-background: #E0E0E0;
    --holaf-tag-text: #37474F;
    --holaf-family-tag-background: #CFD8DC;
    --holaf-family-tag-text: #37474F;
    --holaf-header-button-bg: rgba(0, 0, 0, 0.05);
    --holaf-header-button-hover-bg: rgba(0, 0, 0, 0.1);
    --holaf-header-button-text: #546E7A;
    --holaf-header-button-hover-text: #263238;
    --holaf-scrollbar-thumb: #B0BEC5;
    --holaf-scrollbar-track: var(--holaf-background-secondary);
}


/* --- SHARED STYLES FOR UTILITY PANELS --- */

/* Base style for the main "Holaf's Utilities" button */
#holaf-utilities-menu-button {
    background-color: #D8700D;
    /* Graphite Orange Accent */
    color: white;
    font-size: 14px;
    padding: 10px;
    cursor: pointer;
    border: 1px solid #A9560A;
    /* Darker Graphite Orange Accent */
    border-radius: 8px;
    margin: 0 4px;
    transition: background-color 0.2s, border-color 0.2s;
}

#holaf-utilities-menu-button:hover {
    background-color: #E77D1E;
    /* Lighter Graphite Orange Accent for hover */
    border-color: #BF6A0B;
}

/* Dropdown menu for Holaf's Utilities */
#holaf-utilities-dropdown-menu {
    display: none;
    position: fixed;
    background-color: #2B2B2B;
    /* Graphite Orange Secondary BG */
    border: 1px solid #3F3F3F;
    /* Graphite Orange Border */
    border-radius: 4px;
    list-style: none;
    padding: 5px 0;
    margin: 0;
    z-index: 100000;
    min-width: 150px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}

#holaf-utilities-dropdown-menu li {
    padding: 8px 12px;
    cursor: pointer;
    color: #E0E0E0;
    /* Graphite Orange Primary Text */
    transition: background-color 0.15s, color 0.15s;
}

#holaf-utilities-dropdown-menu li:hover {
    background-color: #D8700D;
    /* Graphite Orange Accent */
    color: white;
}


/* --- SHARED STYLES FOR HEADER BUTTONS (Panel Header) --- */
.holaf-header-button-group {
    display: flex !important;
    gap: 4px !important;
    margin-left: 10px !important;
    align-items: center !important;
}

.holaf-header-button {
    background: var(--holaf-header-button-bg) !important;
    border: 1px solid var(--holaf-border-color) !important;
    color: var(--holaf-header-button-text) !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    padding: 2px !important;
    width: 24px !important;
    height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s !important;
}

.holaf-header-button:hover {
    background: var(--holaf-header-button-hover-bg) !important;
    color: var(--holaf-header-button-hover-text) !important;
    border-color: var(--holaf-accent-color) !important;
}

/* Theme selection dropdown menu INSIDE panels */
.holaf-theme-menu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    background-color: var(--holaf-background-secondary) !important;
    border: 1px solid var(--holaf-border-color) !important;
    border-radius: 4px !important;
    z-index: 1002 !important;
    display: none;
    list-style: none !important;
    padding: 5px !important;
    margin: 2px 0 0 !important;
    min-width: 150px !important;
}

.holaf-theme-menu li {
    color: var(--holaf-text-secondary);
    padding: 6px 10px;
    cursor: pointer;
    border-radius: 3px;
    transition: background-color 0.15s, color 0.15s;
}

.holaf-theme-menu li:hover {
    background-color: var(--holaf-accent-color) !important;
    color: var(--holaf-button-text) !important;
}


/* Base style for floating panels */
.holaf-utility-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 300px !important;
    min-height: 200px !important;
    width: 700px;
    height: 550px;
    max-width: 90vw !important;
    max-height: 90vh !important;
    background-color: var(--holaf-background-primary) !important;
    border: 1px solid var(--holaf-border-color) !important;
    border-radius: 8px !important;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.6) !important;
    z-index: 1001;
    display: flex;
    flex-direction: column !important;
    font-family: sans-serif !important;
    overflow: hidden !important;
    color: var(--holaf-text-primary) !important;
    --holaf-mm-zoom-factor: 1.0;
}

/* Header for dragging, title, and buttons */
.holaf-utility-header {
    background-color: var(--holaf-background-secondary) !important;
    color: var(--holaf-text-primary) !important;
    padding: 8px 12px !important;
    cursor: move !important;
    user-select: none !important;
    border-bottom: 1px solid var(--holaf-border-color) !important;
    border-top-left-radius: 8px !important;
    border-top-right-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    font-weight: bold !important;
    flex-shrink: 0 !important;
    gap: 8px;
}

.holaf-utility-header>span:first-of-type {
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.holaf-utility-close-button {
    background: none !important;
    color: var(--holaf-text-secondary) !important;
    border: none !important;
    border-radius: 50% !important;
    width: 24px !important;
    height: 24px !important;
    line-height: 24px !important;
    text-align: center !important;
    cursor: pointer !important;
    font-size: 16px !important;
    font-weight: bold !important;
    transition: background-color 0.2s, color 0.2s !important;
    margin-left: auto !important;
    flex-shrink: 0;
}

.holaf-utility-close-button:hover {
    background-color: #c44 !important;
    color: white !important;
}

.holaf-utility-resize-handle {
    position: absolute !important;
    bottom: 0 !important;
    right: 0 !important;
    width: 16px !important;
    height: 16px !important;
    cursor: se-resize !important;
    background-image: linear-gradient(135deg, transparent 0%, transparent 50%, var(--holaf-text-secondary, #888) 50%, var(--holaf-text-secondary, #888) 75%, transparent 75%, transparent 100%) !important;
    z-index: 2 !important;
}

/* Common button style for inside panels (ComfyUI like) */
.holaf-utility-panel .comfy-button {
    background-color: var(--holaf-button-background) !important;
    color: var(--holaf-button-text) !important;
    border: 1px solid transparent !important;
    padding: 6px 12px !important;
    text-align: center !important;
    text-decoration: none !important;
    display: inline-block !important;
    font-size: 14px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    transition: opacity 0.2s !important;
}

.holaf-utility-panel .comfy-button:hover {
    opacity: 0.85;
}

.holaf-utility-panel .comfy-button:active {
    opacity: 0.7;
}

.holaf-utility-panel .comfy-button:disabled {
    background-color: var(--holaf-background-secondary) !important;
    color: var(--holaf-text-secondary) !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
}


/* --- CUSTOM MODAL DIALOG STYLES --- */
#holaf-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
}

#holaf-modal-dialog {
    background-color: var(--holaf-background-primary, #1E1E1E);
    color: var(--holaf-text-primary, #E0E0E0);
    border: 1px solid var(--holaf-border-color, #3F3F3F);
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.6);
    min-width: 300px;
    max-width: 500px;
    width: auto;
    display: flex;
    flex-direction: column;
}

#holaf-modal-dialog .holaf-utility-header {
    cursor: default !important;
    /* No dragging for modals */
}

#holaf-modal-dialog .holaf-modal-content {
    padding: 20px 15px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--holaf-text-secondary, #A0A0A0);
}

#holaf-modal-dialog .holaf-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 10px 15px;
    border-top: 1px solid var(--holaf-border-color, #3F3F3F);
}

#holaf-modal-dialog .holaf-modal-footer .comfy-button.secondary {
    background-color: var(--holaf-background-secondary) !important;
    color: var(--holaf-text-secondary) !important;
    border: 1px solid var(--holaf-border-color) !important;
}

#holaf-modal-dialog .holaf-modal-footer .comfy-button.secondary:hover {
    border-color: var(--holaf-accent-color) !important;
    color: var(--holaf-text-primary) !important;
    opacity: 1;
}


/* --- MODEL MANAGER SPECIFIC STYLES (using theme variables) --- */

#holaf-manager-panel .holaf-manager-toolbar {
    font-size: calc(1em * var(--holaf-mm-zoom-factor));
    background-color: var(--holaf-background-secondary);
    border-bottom: 1px solid var(--holaf-border-color);
    padding: calc(0.5em * var(--holaf-mm-zoom-factor)) calc(0.8em * var(--holaf-mm-zoom-factor));
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: calc(0.5em * var(--holaf-mm-zoom-factor));
}

#holaf-manager-panel .holaf-manager-search {
    padding: calc(0.4em * var(--holaf-mm-zoom-factor)) calc(0.6em * var(--holaf-mm-zoom-factor));
    background-color: var(--holaf-input-background);
    border: 1px solid var(--holaf-border-color);
    border-radius: 4px;
    color: var(--holaf-text-primary);
    font-size: calc(13px * var(--holaf-mm-zoom-factor));
    outline: none;
}

#holaf-manager-panel .holaf-manager-search:focus {
    border-color: var(--holaf-accent-color);
}

#holaf-manager-panel .holaf-manager-list-header {
    display: flex;
    align-items: center;
    padding: calc(0.3em * var(--holaf-mm-zoom-factor)) calc(15px * var(--holaf-mm-zoom-factor));
    background-color: var(--holaf-background-secondary);
    border-bottom: 1px solid var(--holaf-border-color);
    font-weight: bold;
    font-size: calc(0.8em * var(--holaf-mm-zoom-factor));
    color: var(--holaf-text-secondary);
    user-select: none;
    flex-shrink: 0;
}

#holaf-manager-panel .holaf-manager-header-col {
    cursor: pointer;
    padding: 0 calc(5px * var(--holaf-mm-zoom-factor));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.15s;
    line-height: 1.3;
}

#holaf-manager-panel .holaf-manager-header-col:hover {
    color: var(--holaf-text-primary);
}

#holaf-manager-panel .holaf-manager-header-col.sort-asc::after,
#holaf-manager-panel .holaf-manager-header-col.sort-desc::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-left: calc(4px * var(--holaf-mm-zoom-factor)) solid transparent;
    border-right: calc(4px * var(--holaf-mm-zoom-factor)) solid transparent;
    margin-left: calc(6px * var(--holaf-mm-zoom-factor));
    vertical-align: middle;
}

#holaf-manager-panel .holaf-manager-header-col.sort-asc::after {
    border-bottom: calc(5px * var(--holaf-mm-zoom-factor)) solid var(--holaf-text-primary);
}

#holaf-manager-panel .holaf-manager-header-col.sort-desc::after {
    border-top: calc(5px * var(--holaf-mm-zoom-factor)) solid var(--holaf-text-primary);
}

/* Column Widths for Header */
#holaf-manager-panel .holaf-header-checkbox {
    flex: 0 0 calc(30px * var(--holaf-mm-zoom-factor));
    cursor: default;
    display: flex;
    align-items: center;
    justify-content: center;
}

#holaf-manager-panel .holaf-header-name {
    flex: 1 1 25%;
}

#holaf-manager-panel .holaf-header-path {
    flex: 1 1 30%;
}

#holaf-manager-panel .holaf-header-type {
    flex: 0 0 calc(110px * var(--holaf-mm-zoom-factor));
    text-align: center;
}

#holaf-manager-panel .holaf-header-family {
    flex: 0 0 calc(110px * var(--holaf-mm-zoom-factor));
    text-align: center;
}

#holaf-manager-panel .holaf-header-size {
    flex: 0 0 calc(80px * var(--holaf-mm-zoom-factor));
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Model List Area */
#holaf-manager-panel .holaf-manager-content {
    flex-grow: 1;
    overflow-y: auto;
    font-size: calc(1em * var(--holaf-mm-zoom-factor));
    padding: calc(0.2em * var(--holaf-mm-zoom-factor)) 0px;
    background-color: var(--holaf-background-primary);
    color: var(--holaf-text-primary);
}

#holaf-manager-panel .holaf-manager-message {
    text-align: center;
    color: var(--holaf-text-secondary);
    font-style: italic;
    padding: 20px 15px;
}

#holaf-manager-panel .holaf-manager-message.error {
    color: #ff8a8a;
    font-weight: bold;
}

/* Individual Model Card */
#holaf-manager-panel .holaf-model-card {
    background-color: var(--holaf-background-secondary);
    border-bottom: 1px solid var(--holaf-border-color);
    padding: 0.25em 10px;
    display: flex;
    align-items: center;
    transition: background-color 0.15s;
    font-size: 0.85em;
    min-height: 0;
}

#holaf-manager-panel .holaf-model-card:last-child {
    border-bottom: none;
}

#holaf-manager-panel .holaf-model-card:hover {
    background-color: color-mix(in srgb, var(--holaf-background-secondary) 80%, var(--holaf-accent-color) 20%);
}

/* Columns within a model card */
#holaf-manager-panel .holaf-model-col {
    padding: 0 5px;
    overflow: hidden;
    display: flex;
    align-items: center;
}

#holaf-manager-panel .holaf-col-checkbox {
    flex: 0 0 calc(30px * var(--holaf-mm-zoom-factor));
    justify-content: center;
}

#holaf-manager-panel .holaf-col-name {
    flex: 1 1 25%;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 0.1em 0;
}

#holaf-manager-panel .holaf-col-type {
    flex: 0 0 calc(100px * var(--holaf-mm-zoom-factor));
    justify-content: center;
}

#holaf-manager-panel .holaf-col-family {
    flex: 0 0 calc(100px * var(--holaf-mm-zoom-factor));
    justify-content: center;
}

#holaf-manager-panel .holaf-col-size {
    flex: 0 0 calc(70px * var(--holaf-mm-zoom-factor));
    justify-content: flex-end;
}

#holaf-manager-panel .holaf-model-name,
#holaf-manager-panel .holaf-model-path {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    width: 100%;
    line-height: 1.2;
}

#holaf-manager-panel .holaf-model-name {
    font-weight: bold;
    color: var(--holaf-text-primary);
}

#holaf-manager-panel .holaf-model-path {
    font-size: 0.85em;
    color: var(--holaf-text-secondary);
    margin-top: 0;
}

/* Model Type Tag & Family Tag */
#holaf-manager-panel .holaf-model-type-tag {
    background-color: var(--holaf-tag-background);
    padding: calc(0.15em * var(--holaf-mm-zoom-factor)) calc(0.4em * var(--holaf-mm-zoom-factor));
    border-radius: 3px;
    font-size: 0.8em;
    color: var(--holaf-tag-text);
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    line-height: 1.3;
}

#holaf-manager-panel .holaf-model-family-tag {
    background-color: var(--holaf-family-tag-background);
    color: var(--holaf-family-tag-text);
    padding: calc(0.15em * var(--holaf-mm-zoom-factor)) calc(0.4em * var(--holaf-mm-zoom-factor));
    border-radius: 3px;
    font-size: 0.8em;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    line-height: 1.3;
}

#holaf-manager-panel .holaf-model-size {
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    font-size: 0.9em;
    color: var(--holaf-text-secondary);
    line-height: 1.2;
}

#holaf-manager-panel .holaf-model-checkbox,
#holaf-manager-panel #holaf-manager-select-all-checkbox {
    margin: 0;
    cursor: pointer;
    transform: scale(0.85);
    accent-color: var(--holaf-accent-color);
    vertical-align: middle;
}

/* Status Bar */
#holaf-manager-panel .holaf-manager-statusbar {
    padding: calc(0.4em * var(--holaf-mm-zoom-factor)) calc(0.8em * var(--holaf-mm-zoom-factor));
    background-color: var(--holaf-background-secondary);
    border-top: 1px solid var(--holaf-border-color);
    font-size: calc(0.75em * var(--holaf-mm-zoom-factor));
    color: var(--holaf-text-secondary);
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
}

/* Custom scrollbar */
#holaf-manager-panel .holaf-manager-content::-webkit-scrollbar,
.holaf-utility-panel .holaf-terminal-view-wrapper::-webkit-scrollbar {
    width: calc(10px * var(--holaf-mm-zoom-factor, 1));
}

#holaf-manager-panel .holaf-manager-content::-webkit-scrollbar-track,
.holaf-utility-panel .holaf-terminal-view-wrapper::-webkit-scrollbar-track {
    background: var(--holaf-scrollbar-track);
}

#holaf-manager-panel .holaf-manager-content::-webkit-scrollbar-thumb,
.holaf-utility-panel .holaf-terminal-view-wrapper::-webkit-scrollbar-thumb {
    background-color: var(--holaf-scrollbar-thumb);
    border-radius: calc(5px * var(--holaf-mm-zoom-factor, 1));
    border: calc(2px * var(--holaf-mm-zoom-factor, 1)) solid var(--holaf-scrollbar-track);
}

#holaf-manager-panel .holaf-manager-content::-webkit-scrollbar-thumb:hover,
.holaf-utility-panel .holaf-terminal-view-wrapper::-webkit-scrollbar-thumb:hover {
    background-color: color-mix(in srgb, var(--holaf-scrollbar-thumb) 70%, var(--holaf-accent-color) 30%);
}


/* --- TERMINAL SPECIFIC STYLES (Non-Xterm view elements will use panel theme variables) --- */
#holaf-terminal-panel .holaf-terminal-non-terminal-view input[type="password"],
#holaf-terminal-panel .holaf-terminal-non-terminal-view input[type="text"] {
    background-color: var(--holaf-input-background) !important;
    color: var(--holaf-text-primary) !important;
    border: 1px solid var(--holaf-border-color) !important;
    padding: 8px;
    border-radius: 3px;
    width: 220px;
    max-width: 80%;
    margin-bottom: 10px;
}

#holaf-terminal-panel .holaf-terminal-non-terminal-view input[type="password"]:focus,
#holaf-terminal-panel .holaf-terminal-non-terminal-view input[type="text"]:focus {
    border-color: var(--holaf-accent-color) !important;
}

#holaf-terminal-panel .holaf-terminal-non-terminal-view p {
    color: var(--holaf-text-secondary);
}

#holaf-terminal-panel .holaf-terminal-non-terminal-view h3,
#holaf-terminal-panel .holaf-terminal-non-terminal-view h4 {
    color: var(--holaf-text-primary);
}

#holaf-terminal-panel .holaf-terminal-view-wrapper>div.terminal {
    padding: 0 !important;
}

/* --- Fullscreen Panel Style --- */
.holaf-panel-fullscreen {
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    transform: none !important;
    border-radius: 0 !important;
    transition: all 0.2s ease-in-out;
}

.holaf-panel-fullscreen .holaf-utility-resize-handle {
    display: none !important;
}

.holaf-panel-fullscreen .holaf-utility-header {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

/* --- IMAGE VIEWER SPECIFIC STYLES (WIP) --- */
/* Placeholder for future styles */
#holaf-viewer-panel .holaf-viewer-content {
    /* e.g., styles for image grid, thumbnails, etc. */
}


/* --- NODES MANAGER SPECIFIC STYLES --- */
#holaf-nodes-manager-panel .holaf-nodes-manager-manual-icon,
#holaf-nodes-manager-panel .holaf-nodes-manager-git-icon,
#holaf-nodes-manager-panel .holaf-nodes-manager-req-icon {
    color: var(--holaf-text-secondary);
    flex-shrink: 0;
    margin-left: 4px;
    /* Reduced margin for tighter icon packing */
    opacity: 0.7;
    vertical-align: middle;
}


#holaf-nodes-manager-panel .holaf-nodes-manager-container {
    --holaf-nm-zoom-factor: 1.0;
    /* This is now set by JS on this container */
    font-size: calc(14px * var(--holaf-nm-zoom-factor));
    /* Base font size scales with zoom */
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#holaf-nodes-manager-panel .holaf-nodes-manager-left-pane {
    flex: 0 0 calc(320px * var(--holaf-nm-zoom-factor));
    /* Slightly wider for checkboxes and icons */
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--holaf-border-color);
    background-color: var(--holaf-background-secondary);
}

#holaf-nodes-manager-panel .holaf-nodes-manager-right-pane {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: var(--holaf-background-primary);
}

#holaf-nodes-manager-panel .holaf-nodes-manager-toolbar {
    padding: calc(6px * var(--holaf-nm-zoom-factor));
    /* Reduced padding */
    border-bottom: 1px solid var(--holaf-border-color);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: calc(6px * var(--holaf-nm-zoom-factor));
    /* Reduced gap */
}

#holaf-nodes-manager-panel .holaf-nodes-manager-filter-input {
    flex-grow: 1;
    /* Allow filter to take space */
    padding: calc(4px * var(--holaf-nm-zoom-factor)) calc(6px * var(--holaf-nm-zoom-factor));
    background-color: var(--holaf-input-background);
    border: 1px solid var(--holaf-border-color);
    border-radius: 3px;
    color: var(--holaf-text-primary);
    font-size: calc(13px * var(--holaf-nm-zoom-factor));
    /* Keep font size consistent with search */
    outline: none;
}

#holaf-nodes-manager-panel .holaf-nodes-manager-filter-input:focus {
    border-color: var(--holaf-accent-color);
}


#holaf-nodes-manager-panel .holaf-nodes-manager-actions-toolbar .comfy-button {
    flex-grow: 1;
    /* Make buttons fill space if wrapped */
    font-size: calc(12px * var(--holaf-nm-zoom-factor));
    /* Smaller font for action buttons */
    padding: calc(4px * var(--holaf-nm-zoom-factor)) calc(8px * var(--holaf-nm-zoom-factor));
}

#holaf-nodes-manager-panel .holaf-nodes-manager-actions-toolbar .comfy-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}


#holaf-nodes-manager-panel .holaf-nodes-manager-list {
    flex-grow: 1;
    overflow-y: auto;
    padding: calc(5px * var(--holaf-nm-zoom-factor));
}

#holaf-nodes-manager-panel .holaf-nodes-manager-list-item {
    padding: calc(1px * var(--holaf-nm-zoom-factor)) calc(10px * var(--holaf-nm-zoom-factor));
    cursor: default;
    border-radius: 4px;
    margin-bottom: calc(1px * var(--holaf-nm-zoom-factor));
    color: var(--holaf-text-primary);
    transition: background-color 0.15s;
    display: flex;
    align-items: center;
}

/* Style for the item whose README is currently displayed */
#holaf-nodes-manager-panel .holaf-nodes-manager-list-item.selected-readme {
    background-color: var(--holaf-accent-color) !important;
    /* Use important if needed to override hover */
    color: var(--holaf-button-text) !important;
}

#holaf-nodes-manager-panel .holaf-nodes-manager-list-item.selected-readme:hover {
    background-color: color-mix(in srgb, var(--holaf-accent-color) 90%, black 10%) !important;
}


#holaf-nodes-manager-panel .holaf-nodes-manager-list-item:not(.selected-readme):hover {
    background-color: var(--holaf-header-button-hover-bg);
}

#holaf-nodes-manager-panel .holaf-nodes-manager-list-item>span:first-of-type {
    /* Target the name span */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-grow: 1;
    /* Allow name to take available space */
}

#holaf-nodes-manager-panel .holaf-nodes-manager-item-cb {
    accent-color: var(--holaf-accent-color);
    transform: scale(calc(0.9 * var(--holaf-nm-zoom-factor)));
}

#holaf-nodes-manager-panel #holaf-nodes-manager-select-all-cb {
    accent-color: var(--holaf-accent-color);
    transform: scale(calc(0.95 * var(--holaf-nm-zoom-factor)));
}


#holaf-nodes-manager-panel .holaf-nodes-manager-readme-header {
    padding: calc(10px * var(--holaf-nm-zoom-factor)) calc(15px * var(--holaf-nm-zoom-factor));
    background-color: var(--holaf-background-secondary);
    border-bottom: 1px solid var(--holaf-border-color);
    color: var(--holaf-text-primary);
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Pushes source tag to right */
}

#holaf-nodes-manager-panel .holaf-nodes-manager-readme-header h3 {
    margin: 0;
    font-size: calc(1.1em * var(--holaf-nm-zoom-factor));
}

#holaf-nodes-manager-panel .holaf-nodes-manager-readme-header a {
    color: var(--holaf-accent-color);
    text-decoration: none;
    margin-left: calc(10px * var(--holaf-nm-zoom-factor));
    font-size: calc(0.9em * var(--holaf-nm-zoom-factor));
}

#holaf-nodes-manager-panel .holaf-nodes-manager-readme-header a:hover {
    text-decoration: underline;
}


#holaf-nodes-manager-panel .holaf-nodes-manager-readme-content {
    flex-grow: 1;
    overflow: auto;
    padding: calc(15px * var(--holaf-nm-zoom-factor)) calc(20px * var(--holaf-nm-zoom-factor));
    color: var(--holaf-text-primary);
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: sans-serif;
    /* More readable for rendered markdown */
    font-size: calc(14px * var(--holaf-nm-zoom-factor));
    line-height: 1.6;
}

/* Basic Markdown styling */
#holaf-nodes-manager-panel .holaf-nodes-manager-readme-content h1,
#holaf-nodes-manager-panel .holaf-nodes-manager-readme-content h2,
#holaf-nodes-manager-panel .holaf-nodes-manager-readme-content h3 {
    color: var(--holaf-text-primary);
    border-bottom: 1px solid var(--holaf-border-color);
    padding-bottom: 0.3em;
    margin-top: calc(24px * var(--holaf-nm-zoom-factor));
    margin-bottom: calc(16px * var(--holaf-nm-zoom-factor));
}

#holaf-nodes-manager-panel .holaf-nodes-manager-readme-content h1 {
    font-size: calc(1.8em * var(--holaf-nm-zoom-factor));
}

#holaf-nodes-manager-panel .holaf-nodes-manager-readme-content h2 {
    font-size: calc(1.5em * var(--holaf-nm-zoom-factor));
}

#holaf-nodes-manager-panel .holaf-nodes-manager-readme-content h3 {
    font-size: calc(1.25em * var(--holaf-nm-zoom-factor));
}

#holaf-nodes-manager-panel .holaf-nodes-manager-readme-content p {
    margin-bottom: 1em;
}

#holaf-nodes-manager-panel .holaf-nodes-manager-readme-content ul,
#holaf-nodes-manager-panel .holaf-nodes-manager-readme-content ol {
    padding-left: 2em;
    margin-bottom: 1em;
}

#holaf-nodes-manager-panel .holaf-nodes-manager-readme-content code {
    background-color: var(--holaf-background-secondary);
    padding: 0.2em 0.4em;
    margin: 0;
    font-size: 85%;
    border-radius: 3px;
    font-family: monospace;
}

#holaf-nodes-manager-panel .holaf-nodes-manager-readme-content pre {
    background-color: var(--holaf-background-secondary);
    padding: 1em;
    overflow: auto;
    border-radius: 3px;
    font-family: monospace;
}

#holaf-nodes-manager-panel .holaf-nodes-manager-readme-content pre code {
    padding: 0;
    margin: 0;
    font-size: 100%;
    background: none;
}

#holaf-nodes-manager-panel .holaf-nodes-manager-readme-content blockquote {
    border-left: .25em solid var(--holaf-border-color);
    padding: 0 1em;
    color: var(--holaf-text-secondary);
    margin-left: 0;
    margin-right: 0;
}

#holaf-nodes-manager-panel .holaf-nodes-manager-readme-content img {
    max-width: 100%;
    height: auto;
    background-color: var(--holaf-background-secondary);
    /* Helps with transparent PNGs */
}

#holaf-nodes-manager-panel .holaf-nodes-manager-readme-content table {
    border-collapse: collapse;
    margin-bottom: 1em;
    width: auto;
    max-width: 100%;
}

#holaf-nodes-manager-panel .holaf-nodes-manager-readme-content th,
#holaf-nodes-manager-panel .holaf-nodes-manager-readme-content td {
    border: 1px solid var(--holaf-border-color);
    padding: 0.5em 0.75em;
}

#holaf-nodes-manager-panel .holaf-nodes-manager-readme-content th {
    background-color: var(--holaf-background-secondary);
    font-weight: bold;
}


/* Scrollbar for Nodes Manager */
#holaf-nodes-manager-panel .holaf-nodes-manager-list::-webkit-scrollbar,
#holaf-nodes-manager-panel .holaf-nodes-manager-readme-content::-webkit-scrollbar {
    width: 10px;
}

#holaf-nodes-manager-panel .holaf-nodes-manager-list::-webkit-scrollbar-track,
#holaf-nodes-manager-panel .holaf-nodes-manager-readme-content::-webkit-scrollbar-track {
    background: var(--holaf-scrollbar-track);
}

#holaf-nodes-manager-panel .holaf-nodes-manager-list::-webkit-scrollbar-thumb,
#holaf-nodes-manager-panel .holaf-nodes-manager-readme-content::-webkit-scrollbar-thumb {
    background-color: var(--holaf-scrollbar-thumb);
    border-radius: 5px;
    border: 2px solid var(--holaf-scrollbar-track);
}

#holaf-nodes-manager-panel .holaf-nodes-manager-list::-webkit-scrollbar-thumb:hover,
#holaf-nodes-manager-panel .holaf-nodes-manager-readme-content::-webkit-scrollbar-thumb:hover {
    background-color: color-mix(in srgb, var(--holaf-scrollbar-thumb) 70%, var(--holaf-accent-color) 30%);
}

/* --- SETTINGS PANEL SPECIFIC STYLES --- */
#holaf-settings-panel .holaf-settings-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: var(--holaf-text-primary);
}

#holaf-settings-panel .holaf-settings-toolbar {
    padding: 8px;
    border-bottom: 1px solid var(--holaf-border-color);
    background-color: var(--holaf-background-secondary);
    display: flex;
    align-items: center;
    gap: 12px;
}

#holaf-settings-panel .holaf-settings-status-indicator {
    font-size: 12px;
    font-style: italic;
    transition: color 0.3s;
}

#holaf-settings-panel .holaf-settings-form {
    padding: 15px;
    overflow-y: auto;
    flex-grow: 1;
}

.holaf-settings-group {
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--holaf-border-color);
}

.holaf-settings-group:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.holaf-settings-group h3 {
    margin: 0 0 5px 0;
    color: var(--holaf-text-primary);
}

.holaf-settings-group-description {
    font-size: 13px;
    color: var(--holaf-text-secondary);
    margin: 0 0 15px 0;
}

.holaf-settings-field {
    display: grid;
    grid-template-columns: 180px 1fr;
    align-items: center;
    gap: 10px 15px;
    margin-bottom: 12px;
}

.holaf-settings-field label {
    font-weight: bold;
    text-align: right;
}

.holaf-settings-field input,
.holaf-settings-field select {
    padding: 6px 8px;
    background-color: var(--holaf-input-background);
    border: 1px solid var(--holaf-border-color);
    color: var(--holaf-text-primary);
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
}

.holaf-settings-field input:focus,
.holaf-settings-field select:focus {
    outline: none;
    border-color: var(--holaf-accent-color);
}

.holaf-settings-field-description {
    grid-column: 2 / 3;
    font-size: 12px;
    color: var(--holaf-text-secondary);
    margin: -5px 0 0 0;
    padding: 0;
}

/* Settings panel scrollbar */
#holaf-settings-panel .holaf-settings-form::-webkit-scrollbar {
    width: 10px;
}

#holaf-settings-panel .holaf-settings-form::-webkit-scrollbar-track {
    background: var(--holaf-scrollbar-track);
}

#holaf-settings-panel .holaf-settings-form::-webkit-scrollbar-thumb {
    background-color: var(--holaf-scrollbar-thumb);
    border-radius: 5px;
    border: 2px solid var(--holaf-scrollbar-track);
}

#holaf-settings-panel .holaf-settings-form::-webkit-scrollbar-thumb:hover {
    background-color: color-mix(in srgb, var(--holaf-scrollbar-thumb) 70%, var(--holaf-accent-color) 30%);
}

/* --- SYSTEM MONITOR OVERLAY STYLES --- */
#holaf-system-monitor-overlay {
    position: fixed;
    top: 50px; /* Adjust as needed, below the main ComfyUI menu */
    right: 15px;
    width: auto; /* Width will be determined by content */
    min-width: 260px; /* Increased min-width */
    max-width: 380px; /* Increased max-width for more text space */
    background-color: rgba(20, 20, 30, 0.65); /* MODIFIED: Increased transparency */
    backdrop-filter: blur(4px); 
    border: 1px solid rgba(100, 100, 120, 0.4);
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
    z-index: 10000; 
    padding: 10px; 
    display: flex; 
    flex-direction: column; 
    gap: 10px; 
    pointer-events: none; 
    color: #E8E8E8; 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-size: 12.5px; /* MODIFIED: Increased font size */
}

/* Container for all textual statistic readouts */
#holaf-system-monitor-overlay #holaf-monitor-stats-text-container {
    display: flex;
    flex-wrap: wrap; 
    gap: 5px 10px; /* Vertical and horizontal gap */
    width: 100%; 
    order: -1; 
}

/* Individual stat item (e.g., CPU: 0%, RAM: 0/0GB) */
#holaf-system-monitor-overlay .holaf-monitor-stat-item {
    background-color: rgba(45, 45, 60, 0.7); /* Adjusted alpha */
    padding: 4px 8px; /* Adjusted padding */
    border-radius: 4px;
    white-space: nowrap; 
}

#holaf-system-monitor-overlay .holaf-monitor-stat-item .value,
#holaf-system-monitor-overlay .holaf-monitor-stat-item .util-value,
#holaf-system-monitor-overlay .holaf-monitor-stat-item .mem-value,
#holaf-system-monitor-overlay .holaf-monitor-stat-item .temp-value {
    font-weight: normal;
    color: #C8C8E0; /* Adjusted color for better contrast with new font size */
}

/* Canvas for the main chart (will be re-evaluated when splitting for GPUs) */
#holaf-system-monitor-overlay #holaf-main-monitor-chart {
    width: 100% !important; 
    height: 80px !important; /* MODIFIED: Increased height slightly */
    display: block;
    background-color: rgba(40, 40, 55, 0.4); /* Adjusted alpha */
    border-radius: 4px;
}

/* Hide old individual section styling if it was present and not overridden */
#holaf-system-monitor-overlay .holaf-monitor-section {
    display: none; 
}